<template>
  <div>
    <div class="card" style="margin:10px; ">祝您生活愉快！</div>

    <div class="card" style="width:50%; margin:10px;">
      <div style="width:50%; font-size:large; font-weight:bolder; margin:10px; ">系统公告</div>
      <el-timeline style="max-width: 600px">
        <el-timeline-item color="green" :timestamp="item.time" placement="top" v-for="item in data.noticeData">
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>

</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
  noticeData:[],
})

const loadNotice = () => {
  request.get("/notice/selectAll").then(res => {
    if (res.code === '200') {
      data.noticeData = res.data;
      if ( data.noticeData && data.noticeData.length > 3) {
        data.noticeData = data.noticeData.slice(0, 3);
      }
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadNotice()
</script>